<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/fabric.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
	</head>
	<body>
		<div class="Content">
			<div class="ContentMain">
				<div class="Logs">
					<img src="images/logo.png">
				</div>
				<div class="Text">
					<img src="images/text.png">
				</div>
				<div class="headportrait">
					<canvas width="200" height="200" id="canvas"></canvas>
				</div>
				<div class="Footer">
					<span>
						<img src="./images/btn1.png">
					</span>
					<span>
						<img src="./images/btn2.png" class="Download">
					</span>
				</div>
			</div>
		</div>
		<div id="Popup">
			<div class="Popup_main">
				<div class="Popup_content">
					<img src="./demo.png" class="img" alt="" width="160" height="160">
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	var drawing = document.getElementById("canvas");
	// 声明画布对象
	var canvas = new fabric.Canvas('canvas');
	// 清除画布存在的图片对象
	canvas.getObjects().slice().forEach(obj => {
		canvas.remove(obj);
	});
	canvas.backgroundColor = '#ffffff'
	canvas.renderAll()
	var imgUrl =
		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F20%2F20180120213143_Vfss3.thumb.700_0.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623489589&t=c08196353bc6c0add0300bc5c400e931'
	var imgA = './images/content.png'

	// 新增图片放入canvas中
	fabric.Image.fromURL(imgUrl, (img) => {
		img.set({
			hasControls: true, // 是否开启图层的控件
			borderColor: 'orange', // 图层控件边框的颜色
			angle: 30,
			left: 6, // 距离canvas顶部的距离
			top: 0 // 距离canvas左边的距离
		});

		img.scale(0.25); // 图片缩放倍数
		canvas.add(img); // 添加图片到canvas中
		canvas.bringToFront(canvas.getActiveObject())
		// canvas.preserveObjectStacking = true
	}, {
		crossOrigin: 'anonymous' // 支持图片跨域
	});
	fabric.Image.fromURL(imgA, (img) => {
		img.set({
			// hasControls: false, // 是否开启图层的控件
			// left: 0, // 距离canvas顶部的距离
			// top: 0 // 距离canvas左边的距离
			hasControls: false, // 是否开启图层的控件
			evented: false, // 这一句让这个rect对象无法被选中
			scaleX: canvas.width / img.width,
			scaleY: canvas.height / img.height
		});

		// img.scale(0.25); // 图片缩放倍数
		canvas.add(img); // 添加图片到canvas中
	}, {
		crossOrigin: 'anonymous' // 支持图片跨域
	});

	canvas.preserveObjectStacking = true
	var currState = canvas.toJSON();

	// 画布导出图片
	setTimeout(function() {
		canvas.bringForward(canvas._objects[0])
		canvas.renderAll()
	}, 150)
</script>
<script type="text/javascript">
	// 画布导出图片
	$(".Download").click(function() {
		$('#Popup').show();
		const dataURL = canvas.toDataURL({
			multiplier: 8, // 导出图片的size和canva的size的倍数
			format: 'jpeg',
			quality: 1 // 图片质量，仅jpeg时可用
		});
		$('.img').attr('src', dataURL)
	})
	// // 获取弹窗
	var Popup = document.getElementById('Popup');
	// 在用户点击其他地方时，关闭弹窗
	window.onclick = function(event) {
		if (event.target == Popup) {
			Popup.style.display = "none";
		}
	}
</script>
